<template>
  <div class="page-container">

    <!-- 关键词订阅 -->
    <scroller :on-refresh="refresh" :on-infinite="infinite" ref="boxScroll">

      <div class="resource-container">

        <div v-for="(item, index) in list" :key="index" class="resource-li">

          <img class="icon-close" src="@/assets/images/icon-close.png" @click="laySubscribe(index)" />

          <img class="icon-wifi" src="@/assets/images/icon-wifi.png" />

          <div class="resource-li-info">
            <div class="rli-tt">
              <span>{{ type[item.keywordType] }}</span>
            </div>
            <div class="rli-keyword">
              关键字：
              <span>{{ item.keywordValue }}</span>
            </div>
          </div>

          <div @click="goResourceList(item)" class="resource-li-btn">本地相关</div>

          <a-spin :spinning="btnLoading" v-if="showLay && (index == closeIndex)" class="resource-li-lay">
            <div @click="cancelSubscribe" class="btn">取消</div>
            <div @click="removeSubscribe(item, index)" class="btn">移除订阅</div>
          </a-spin>

        </div>

        <Empty v-if="list.length === 0" />

      </div>

    </scroller>

    <div class="footer-btn-con">
      <div class="footer-btn yellow" @click="goBack">回到首页</div>
      <div class="footer-btn" @click="addSubscribe">+添加订阅</div>
    </div>

  </div>
</template>

<script>
import Empty from '@/components/empty'
import { dataApi } from '@/api/api'
export default {
  name: 'Subscribe',
  components: {
    Empty
  },
  data () {
    return {
      loading: false,
      showLay: false,
      closeIndex: -1,
      list: [],
      page: {
        num: 0,
        size: 10
      },
      btnLoading: false,
      type: {
        0: '任意词',
        1: '主题',
        2: '题名',
        3: '出版社'
      }
    }
  },
  created () {
    document.title = '关键词订阅'
  },
  mounted () {
  },
  methods: {
    infinite (done) {
      this.page.num += 1
      this.getList(done)
    },
    refresh (done) {
      this.list = []
      this.page.num = 1
      this.getList(done)
    },
    getList (done) {
      this.loading = true
      const params = {
        current: this.page.num,
        pageSize: this.page.size
      }
      dataApi.findKeyWords(params)
        .then(res => {
          if (res.data.code === 200) {
            const resData = res.data.data
            this.list = this.list.concat(resData.records)
            if (resData.current >= resData.pages) {
              this.$refs.boxScroll.finishInfinite(true)
            } else {
              done()
            }
          } else {
            this.$refs.boxScroll.finishInfinite(true)
            this.$message.error(res.data.message)
          }
        })
        .catch(() => {
          this.$refs.boxScroll.finishInfinite(true)
        })
        .finally(() => {
          this.loading = false
        })
    },
    laySubscribe (e) {
      this.showLay = true
      this.closeIndex = e
    },
    goResourceList (e) {
      this.$router.push({
        path: '/subscribe/resource',
        query: {
          keyword: e.keywordValue,
          type: e.keywordType
        }
      })
    },
    cancelSubscribe () {
      this.showLay = false
      this.closeIndex = -1
    },
    removeSubscribe (e, i) {
      this.btnLoading = true
      dataApi.removeSub({ id: e.id })
        .then(res => {
          if (res.data.code === 200) {
            this.showLay = false
            this.closeIndex = -1
            this.list.splice(i, 1)
          }
        })
        .finally(() => {
          this.btnLoading = false
        })
    },
    goBack () {
      this.$router.push({
        path: '/recommend'
      })
    },
    addSubscribe () {
      this.$router.push({
        path: '/subscribe/addSubscribe'
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.resource-container {
  background: #fff;
}

.resource-li {
  height: 2rem;
  border-bottom: 1px solid #ededed;
  position: relative;
  display: flex;
  align-items: center;
  &:last-of-type {
    border-bottom: none;
  }
}

.icon-close {
  width: .2rem;
  height: .2rem;
  position: absolute;
  top: .16rem;
  right: .16rem;
}

.icon-wifi {
  width: .86rem;
  height: .86rem;
  margin: 0 .26rem 0 .32rem;
}

.resource-li-info {
  flex: 1;
  .rli-tt {
    margin-bottom: .1rem;
    display: flex;
    span {
      line-height: .4rem;
      background: rgba(153,153,153,0.22);
      border-radius: .04rem;
      padding: 0 .24rem;
      font-size: .24rem;
      color: #333;
    }
  }
  .rli-keyword {
    font-size: .28rem;
    color: #999;
    span {
      color: #000;
    }
  }
}

.resource-li-btn {
  height: .52rem;
  background: #4b7efa;
  border-radius: .26rem;
  padding: 0 .26rem;
  font-size: .22rem;
  line-height: .52rem;
  color: #fff;
  margin-right: .34rem;
}

.resource-li-lay {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  .btn {
    width: 1.62rem;
    height: .64rem;
    line-height: .64rem;
    border-radius: .32rem;
    background: #fff;
    margin: 0 .2rem;
    color: #000;
    font-size: .22rem;
    text-align: center;
    display: inline-block;
    &:first-of-type {
      color: #666;
    }
  }
}

.footer-btn {
  z-index: 99;
}
</style>
